<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<ui:composition template="../templates/hub.xhtml">
	<ui:define name="titre"></ui:define>
	<ui:define name="hub_page">

		<!-- Fonctions javascript. -->
		<script language="javascript">
			function javascriptOnLoad(){
					initCompositions();
				}

			//Fonction placée ici car très liée à la page.
			function fillDestinationExtId(o,idx){
				var targetName= "compositions_form:compositions_table:" + idx + ":destinationExtId";
				var target = document.getElementById(targetName);
				if(target){
					target.value = o.value;
					if(o.value == "-1"){
						target.value = "";
						}
					}else{
						alert("Erreur technique : veuillez contacter l'administrateur du site.");
						}
			}
		</script>

		<!-- Inclusion du bloc de navigation simple. -->
		<ui:include src="../blocs/inc_navigation_message.xhtml" />

		<!-- Pilotage des lignes tableau. -->
		<ui:include src="../blocs/inc_selector.xhtml" />

		<!-- On place un div scrollable pour positionner un ascenceur sur la droite. -->
		<div id="main_composition_div" class="composition_scrollable">

			<h:form id="compositions_form">
				<h:panelGrid id="compositions_panel_container" width="100%">
					<rich:dataTable value="#{inputDataIhmManaged.lstCompositions}"
						var="composition" style="width:100%"
						rowClasses="rich_datagrid_even_line, rich_datagrid_odd_line"
						iterationStatusVar="it" id="compositions_table"
						styleClass="stable">

						<f:facet name="noData">
							<h:outputText value="#{msg['msg.info.nodata']}" />
						</f:facet>

						<rich:column style="width:50px; text-align:center">
							<f:facet name="header">
								<h:outputText value="#{lbl['common.position']}" />
							</f:facet>
							<h:outputText value="#{it.index + 1}" />
						</rich:column>

						<rich:column style="width:160px; text-align:center">
							<f:facet name="header">
								<h:outputText value="#{lbl['compo.wagon']}" />
							</f:facet>
							<h:inputText id="extId" value="#{composition.wagon.extId}"
								size="25" maxlength="16"
								onkeypress="return checkWagonExtId(this);" />
						</rich:column>

						<rich:column style="width:120px; text-align:center">
							<f:facet name="header">
								<h:outputText value="#{lbl['compo.lading']}" />
							</f:facet>
							<h:selectOneMenu id="lading" value="#{composition.wagon.lading}">
								<f:selectItems value="#{repositoryManaged.lstWagonLading}" />
							</h:selectOneMenu>
						</rich:column>

						<rich:column style="width:80px; text-align:center">
							<f:facet name="header">
								<h:outputText value="#{lbl['compo.ate']}" />
							</f:facet>
							<h:selectOneMenu id="ate" value="#{composition.wagon.ate}">
								<f:selectItem itemLabel="#{lbl['select.title.ate']}"
									itemValue="-1" />
								<f:selectItem itemLabel="#{lbl['common.no']}"
									itemValue="#{lbl['common.no']}" />
								<f:selectItem itemLabel="#{lbl['common.yes']}"
									itemValue="#{lbl['common.yes']}" />
							</h:selectOneMenu>
						</rich:column>

						<rich:column style="width:100px; text-align:center">
							<f:facet name="header">
								<h:outputText value="#{lbl['compo.weight.lading']}" />
							</f:facet>
							<h:inputText id="weightLading"
								onkeypress="return checkNumber(this);"
								value="#{composition.wagon.weightLading}" size="10"
								maxlength="12" onblur="checkFloatNotNull(this);" />
						</rich:column>

						<rich:column style="width:100px; text-align:center">
							<f:facet name="header">
								<h:outputText value="#{lbl['compo.brake.force']}" />
							</f:facet>
							<h:inputText id="brakeForce"
								onkeypress="return checkNumber(this);"
								value="#{composition.wagon.brakeForce}" size="10" maxlength="12"
								onblur="checkFloatNotNull(this);" />
						</rich:column>

						<rich:column style="width:120px; text-align:center">
							<f:facet name="header">
								<h:outputText value="#{lbl['compo.destination.extid']}" />
							</f:facet>

							<!-- On positionne cette liste sur le champ commentaire juste pour avoir la réinitialisation. -->
							<!-- Ce champ n'est pas inséré dans la base de données à ce niveau. -->
							<h:panelGrid columns="3">
								<h:selectOneMenu id="selectDestinationExtId"
									value="#{composition.comment}"
									onchange="fillDestinationExtId(this, #{it.index});">
									<f:selectItems
										value="#{repositoryManaged.lstDestinationsExtId}" />
								</h:selectOneMenu>

								<h:panelGroup>
									<h:outputText value="#{lbl['common.or']}" /> : 
							</h:panelGroup>

								<h:inputText id="destinationExtId"
									value="#{composition.destinationExtId}" size="10" maxlength="6"
									onkeypress="return checkInteger(this);" />
							</h:panelGrid>
						</rich:column>

						<rich:column style="width:35px;text-align:center">
							<f:facet name="header">
								<h:outputText value="#{lbl['common.fault.indicator']}" />
							</f:facet>
							<h:graphicImage value="../../imgs/icons/ico_error_20x20.png"
								rendered="#{composition.errorIndicator}">
							</h:graphicImage>
							<h:graphicImage value="../../imgs/icons/ico_info_20x20.png"
								rendered="#{!composition.errorIndicator}" />
						</rich:column>

						<rich:column style="text-align:left;">
							<f:facet name="header">
								<h:outputText value="#{lbl['common.message']}" />
							</f:facet>
							<h:outputText value="#{composition.errorMessage}" />
						</rich:column>
					</rich:dataTable>

					<h:panelGrid columns="4"
						columnClasses="_left, _center,  _center, _right" width="100%"
						border="0">

						<a4j:commandButton onclick="initCompositions();"
							value="#{lbl['common.button.erase']}" />

						<h:panelGrid columns="2">
							<h:outputText value="#{lbl['compo.line.add']}" />
							<a4j:commandLink execute="@form"
								render="compositions_panel_container"
								action="#{inputDataIhmManaged.addComposition}">
								<h:graphicImage value="../../imgs/icons/ico_create.png" />
							</a4j:commandLink>
						</h:panelGrid>

						<h:panelGroup>
							<h:outputText value="#{lbl['compo.tcms.train.id']}" /> : 
						<h:inputText id="tcmsTrainId"
								value="#{inputDataIhmManaged.tcmsTrainId}" size="25"
								maxlength="45" />
						</h:panelGroup>

						<a4j:commandButton
							action="#{inputDataIhmManaged.integrateCompositions}"
							value="#{lbl['common.button.validate']}"
							render="compositions_panel_container"
							oncomplete="makeFocusOnField('compositions_form:compositions_table:0:extId');" />

					</h:panelGrid>
				</h:panelGrid>
			</h:form>
		</div>

		<!-- ******************************** -->
		<!-- Initialisation des compositions. -->
		<a4j:jsFunction name="initCompositions" execute="@this"
			immediate="true" action="#{inputDataIhmManaged.initCompositions}"
			render="compositions_panel_container"
			oncomplete="makeFocusOnField('compositions_form:compositions_table:0:extId');" />

	</ui:define>
</ui:composition>
</html>